<template>
  <div>
    <a-menu
      :open-keys="openKeys"
      :selected-keys="selectedKeys"
      :mode="mode"
      :theme="theme"
      :style="style"
      @click="click"
    >
      <template v-for="item in data">
        <template v-if="!item.children">
          <a-menu-item :key="item.id" :role="item.path" :title="item.title">
            <template #icon>
              <r-h-icon :name="item.icon" />
            </template>
            {{ item.title }}
          </a-menu-item>
        </template>
        <template v-else>
          <sub-menu :key="item.key" :menu-info="item" />
        </template>
      </template>
    </a-menu>
  </div>
</template>

<script lang="ts">
import RHIcon from '@/components/RHIcon/index.vue'
const SubMenu = {
  name: 'SubMenu',
  props: {
    menuInfo: {
      type: Object,
      default: () => ({})
    }
  },
  template: `
    <a-sub-menu :key="menuInfo.id">
    <template #icon>
      <r-h-icon :name="menuInfo.icon"/>
    </template>
    <template #title>{{ menuInfo.title }}</template>
    <template v-for="item in menuInfo.children" :key="item.key">
      <template v-if="!item.children">
        <a-menu-item :key="item.id" :title="item.title" :role="item.path">
          <template #icon>
            <r-h-icon :name="item.icon"/>
          </template>
          {{ item.title }}
          <template #title>{{ item.title }}</template>
        </a-menu-item>
      </template>
      <template v-else>
        <sub-menu :menu-info="item" :key="item.id"/>
      </template>
    </template>
    </a-sub-menu>
  `,
  components: {
    RHIcon
  }
}
import { defineComponent } from 'vue'
export default defineComponent({
  name: 'RHMenu',
  components: {
    RHIcon,
    'sub-menu': SubMenu
  },
  props: {
    /**
     * 打开菜单key
     */
    openKeys: {
      type: Array,
      default: () => []
    },
    /**
     * 选中表单key
     */
    selectedKeys: {
      type: Array,
      default: () => []
    },
    /**
     * 菜单样式
     */
    style: {
      type: String,
      default: 'width: 256px,'
    },
    /**
     * 菜单类型，现在支持垂直、水平、和内嵌模式三种
     */
    mode: {
      type: String,
      default: 'inline'
    },
    /**
     * 主题颜色
     */
    theme: {
      type: String,
      default: 'dark'
    },
    /**
     * 菜单数据
     */
    data: {
      type: Array,
      default: () => []
    },
    click: {
      type: Function
    }
  }
})
</script>

<style></style>
